<template>
  <div>
    <r-table
      :tableHandles="tableHandles"
      :isSelection="false"
      :isIndex="false"
      :isPagination="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="tablePage"
      :isHandle="true"
      @refresh="init()"
    >
    </r-table>
    <r-form
      :formRules="formRules"
      :formHandle="formHandle"
      :formData="formData"
      :formCols="formCols"
      ref="elForm"
      labelWidth="200px"
      dialogWidth="700px"
      :isHandle="true"
    />
  </div>
</template>

<script>
export default {
  name: "platform_information",
  data() {
    var checkToFixedTwo = (rule, value, callback) => {
      const reg = /[^\d]/g;
      if (!reg.test(value)) {
        callback();
      } else {
        return callback(new Error("Please Enter an integer number"));
      }
    };
    return {
      isformData: false,
      isformDatas: false,
      btTypeIdList: [],
      formData: {
        type: 1,
        id: "",
        agentId: "",
        money: "",
        remarks: "",
        btType: "",
        btTypeId: ""
      },
      formCols: [
        {
          type: "input",
          label: "Deposit ID",
          placeholder: "Please Enter",
          prop: "id",
          width: 350,
          isShow: () => {
            return false;
          },
          isDisabled: () => true
        },
        {
          type: "select",
          label: "Agent ID",
          placeholder: "Please Select",
          prop: "agentId",
          width: 350,
          options: []
        },
        {
          type: "input",
          label: "Deposit Money($)",
          placeholder: "Please Enter",
          prop: "money",
          width: 350
          // remark: "元"
        },
        {
          type: "textarea",
          label: "Describe",
          placeholder: "Please Enter",
          prop: "remarks",
          width: 350
        },
        {
          type: "select",
          label: "Battery Type Name",
          placeholder: "Please Select",
          prop: "btType",
          width: 350,
          options: [],

          isShow: () => {
            return this.isformData ? true : false;
          }
        },
        {
          type: "input",
          label: "Battery Type ID",
          placeholder: "Please Select",
          prop: "btTypeId",
          width: 350,
          options: [],
          isDisabled: () => true,
          isShow: () => {
            return false;
          }
        }
      ],
      formHandle: [
        {
          label: "Cancel",
          handle: e => this.elFormVisible()
        },
        {
          label: "Confirm",
          type: "success",
          handle: e => this.elFormSubmit()
        }
      ],
      formRules: {
        id: [{ required: true, message: "Please Enter", trigger: "blur" }],
        agentId: [
          { required: true, message: "Please Select", trigger: "blur" }
        ],
        money: [
          { required: true, message: "Please Enter", trigger: "blur" }
          // { validator: checkToFixedTwo, trigger: 'blur' }
        ],
        remarks: [{ required: true, message: "Please Enter", trigger: "blur" }],
        btType: [{ required: true, message: "Please Enter", trigger: "blur" }]
        // btTypeId: [{ required: true, message: 'Please Enter', trigger: 'blur' }],
      },

      tableHandles: [
        {
          label: "Add",
          type: "primary",
          plain: true,
          handle: e => this.elFormVisible()
        }
      ],
      tableData: [],
      tableCols: [
        {
          label: "Agent Name",
          prop: "name"
        },
        // {
        // 	label: "Agentid",
        // 	prop: "agentId",
        // },

        {
          label: "Battery Type",
          prop: "btType"
          // width: 110,
        },
        // {
        // 	label: "Battery Number",
        // 	prop: "btTypeId",
        // 	// width: 110,
        // },
        {
          label: "Deposit Money",
          prop: "money",
          formatter: e => (e.money ? "$" + e.money : "$0")
        },
        {
          label: "Describe",
          prop: "remarks"
          // width: 110,
        },

        {
          label: "Operations",
          type: "button",
          width: 150,
          btnList: [
            {
              label: "Edit",
              type: "primary",
              plain: true,
              handle: row => this.elFormDetail(row)
            }
          ]
        }
      ],
      tablePage: { limit: 10, page: 1, total: 0 }
    };
  },
  watch: {
    "formData.agentId": {
      handler(newValue) {
        if (newValue) {
          this.isformData = true;
          this.formDataFn(newValue);
        } else {
          this.isformData = false;
          return;
        }
      },
      deep: true // 深度监听
    },
    "formData.btType": {
      handler(newValue) {
        if (newValue) {
          console.log(33333333, newValue);
          this.isformDatas = true;
          this.btTypeIdList.forEach(i => {
            let id = newValue.split(":")[1];
            if (i.id === id) {
              this.formData.btTypeId = i.id;
              this.formData.btType = i.typeName;
            } else {
              return;
            }
          });
        } else {
          this.isformDatas = false;
          return;
        }
      },
      deep: true // 深度监听
    }
  },
  async mounted() {
    this.getData();
    this.agentFn();
  },

  methods: {
    async getData() {
      // var res = await this.apis.deposit_info()
      let ress = await this.apis.deposit_list({
        type: 1,
        pageNum: this.tablePage.page,
        pageSize: this.tablePage.limit
      });
      this.tableData = ress.rows || [];
      this.tablePage.total = ress.total;
    },
    // 拿到BatteryType
    async formDataFn(newValue) {
      let res = await this.apis.batteryTypeListBatteryTypeByAgent(newValue);
      this.btTypeIdList = res.data || [];
      let options = [];
      this.btTypeIdList.map(res => {
        // options1.push({
        // 	value: res.id + ',' + res.typeName,
        // 	label: res.typeName
        // });
        options.push({
          value: res.typeName + ":" + res.id,
          label: res.typeName
        });
      });
      this.formCols[this.labIndex2(this.formCols, "btType")].options = options;
    },
    // 拿到Agentid列表
    async agentFn() {
      let param = {
        pageNum: 1,
        pageSize: 100
      };
      let res = await this.apis.agent_list(param);
      let arr = res.rows;
      let options = [];
      arr.forEach(i => {
        options.push({
          label: i.name,
          value: i.id
        });
      });
      this.formCols[this.labIndex2(this.formCols, "agentId")].options = options;
    },
    // Edit
    elFormDetail(row) {
      Object.keys(this.formData).forEach(key => {
        this.formData[key] = row[key];
      });
      this.elFormVisible();
    },

    elFormSubmit() {
      this.$refs.elForm.$refs.ruleForm.validate(async valid => {
        if (valid) {
          if (this.formData.id) {
            let res = await this.apis.depositUpdate(this.formData);
            this.$message({
              type: res.code == 200 ? "success" : "error",
              message: res.msg
            });
          } else {
            let res = await this.apis.deposit_save(this.formData);

            this.$message({
              type: res.code == 200 ? "success" : "error",
              message: res.msg
            });
          }

          this.elFormVisible();
          this.getData();
        }
      });
    }
  }
};
</script>

<style scoped lang="scss"></style>
